<template>
  <div class="exemplaryProcessPlan">
    <overTable
      ref="magoTable"
      :key="key"
      :table-data="tableData"
      height="500"
      :date="date"
      :permissions="permissions"
      :index-row="indexRow"
      :page-set="pagination"
      @selection-change="selectionChange"
      @pageChange="pageChange"
      @handleSizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import  overTable  from '@/components/renderTable/overTable.vue'
import  EditTableRow  from '@/components/renderTable/EditTableRow.vue'
export default {
  name: 'easyRenderTable',
  // eslint-disable-next-line vue/no-unused-components
  components: { overTable, EditTableRow },
  props: {},
  data() {
    return {
      // overTable
      key: 0,
      date: [
        {no:'12138',id:12138,name:'第一',customer:'客户名',miji:'1',hetong:'合同名'},
          {no:'12138',id:12138,name:'第一',customer:'客户名',miji:'1',hetong:'合同名'},
          {no:'12138',id:12138,name:'第一',customer:'客户名',miji:'1',hetong:'合同名'},
          {no:'12138',id:12138,name:'第一',customer:'客户名',miji:'1',hetong:'合同名'},
      ],
      permissions: [],
      indexRow: { title: '序号', width: 70, align: 'center' },
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      }
    }
  },
  computed: {
    tableData() {
      const _this = this
      return [
        {
          title: '合同号', key: 'no', align: 'center', minWidth: 100, component: {
            render(h, row) {
              return h('span', {
                on: {
                  click: () => {
                    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                    // this.$router.push({
                    //   path: `/sales/contracasda`,
                    //   query: {
                    //     'query-id': row.id
                    //   }
                    // })
                  }
                },
                style: {
                  cursor: 'pointer',
                  color: 'blue'
                }
              },row.no)
            }
          }
        },
        {
          title: '合同名称', key: 'name', align: 'center', minWidth: 100
        },
        {
          title: '客户', key: 'customer', align: 'center', minWidth: 100
        },
        {
          title: '密级', key: 'miji', align: 'center', minWidth: 100, component: {
            render(h, row, ) {
              // const test = _this.$utils.getParamsFromLists(_this.dictionData, 'value', row.name, 'label')
              const test = '123'+row.id
              return h('span', test)
            }
          }
        },
        {
          title: '合同名称', key: 'hetong', align: 'center', minWidth: 100
        },
        {
          title: '操作', key: 'row-data-operator', minWidth: 200, align: 'center', component: {
            render(h, row, ) {
              return <EditTableRow scope={{ row }} btns={[
                { name: 'xiugai', btnVal: 'rowUpdate', props: { type: 'promary', size: 'mini' }},
                { name: 'shanchu', btnVal: 'rowdel', props: { type: 'warning', size: 'mini' }}
              ]} onClickRowFun={_this.clickRowFun}></EditTableRow>
            }
          }
        }
      ]
    }
  },
  watch: {
  },
  created() {
    this.jiajieko()

  },
  mounted() {
  },
  activated() {
  },
  beforeDestroy() {
  },
  methods: {
    clickRowFun(item, scope) {
      this[scope.btnVal] && this[scope.btnVal](item)
    },
    rowUpdate() {},
    rowdel() {},
    selectionChange(){},
    pageChange(){},
    handleSizeChange(){},
    jiajieko(){
      setTimeout(function() {
        this.date=[
          {no:'12138',id:12138,name:'第一',customer:{orgName:'客户名'},miji:'1',hetong:'合同名'},
          {no:'12138',id:12138,name:'第一',customer:{orgName:'客户名'},miji:'1',hetong:'合同名'},
          {no:'12138',id:12138,name:'第一',customer:{orgName:'客户名'},miji:'1',hetong:'合同名'},
          {no:'12138',id:12138,name:'第一',customer:{orgName:'客户名'},miji:'1',hetong:'合同名'},
        ]
        this.key++
        console.log(this.date,'this.date'); // 3秒之后，再执行这段代码。

    }, 3000);
    }
  }
}
</script>
<style lang='scss'>

</style>
